<template>
	<view class="predetermine">
		<view
			class="status_bar_h"
			:style="{
				height: `${statusBarHeight}px`,
				backgroundColor: '#20BF6C',
			}"></view>
		<view class="img_box">
			<!-- <swiper
				style="height: 400rpx"
				circular
				:indicator-dots="false"
				:autoplay="true"
				:interval="2000"
				:duration="500">
				<swiper-item
					v-for="(item, key) in src"
					:key="key">
					<view class=""
						><image
							style="width: 100%; height: 400rpx"
							mode="aspectFill"
							:src="item"></image
					></view>
				</swiper-item>
			</swiper> -->
			<image
				style="width: 100%; height: 400rpx"
				mode="aspectFill"
				:src="`${src.length > 4 ? src[4] : ''}`"></image>
		</view>
		<view class="main">
			<view class="title">
				<view class="store">{{ view.store }}</view>
				<view class="info">
					<text>歡迎您：</text><text>{{ view.user.mobile }} | </text
					><text>{{ view.user.level === 0 ? '普通會員' : '' }} | </text
					><text @click="logout">退出</text>
				</view>
			</view>
			<view class="room_info">
				<view class="room_info_box">
					<view class="room_info_l">
						<up-image
							:show-loading="true"
							:src="view.room.image"
							width="230rpx"
							height="174rpx"></up-image>
					</view>
					<view class="room_info_r">
						<view class="room_info_r_title"> {{ view.room.name }} </view>
						<view class="room_info_r_content">
							<view
								v-for="(item, key) in view.room.label"
								class="label"
								:key="key"
								>{{ item }}</view
							>
						</view>
						<view class="room_info_r_pk">
							<view class="room_pack_title">精選套餐</view>
							<view
								v-if="view.packOrder"
								class="room_time">
								<view class="room_time_box">
									<view class="room_time_top">
										<view class="list">{{
											`${
												view.packOrder && view.packOrder.duration_hour
													? view.packOrder.duration_hour
													: ''
											}小時`
										}}</view>
										<view class="list">{{
											`現價$${
												view.packOrder && view.packOrder.price
													? view.packOrder.price
													: '0'
											}元`
										}}</view>
										<view class="list">{{
											`會員價$${
												view.packOrder && view.packOrder.hy
													? view.packOrder.hy
													: '0'
											}元`
										}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="room_time">
				<view
					v-if="view.order.startTime < view.order.endTime"
					class="room_time_box">
					<view class="room_time_top">
						<view class="list">{{
							`${view.order.year}-${view.order.date} 周${view.order.wek}`
						}}</view>
						<view class="list">时长</view>
						<view class="list">{{
							`${view.order.year}-${view.order.date} 周${view.order.wek}`
						}}</view>
					</view>
					<view class="room_time_bot">
						<view class="list">{{ `${view.order.startTime}` }}</view>
						<view class="list">{{ setDuration(view.order.duration) }}</view>
						<view class="list">{{ `${view.order.endTime}` }}</view>
					</view>
				</view>
				<!-- 结束时间是第2天时显示 -->
				<view
					v-if="view.order.startTime > view.order.endTime"
					class="room_time_box">
					<view class="room_time_top">
						<view class="list">{{
							`${view.order.year}-${view.order.date} 周${view.order.wek}`
						}}</view>
						<view class="list">时长</view>
						<view class="list">{{
							`${setDate(`${view.order.year}-${view.order.date}`)}`
						}}</view>
					</view>
					<view class="room_time_bot">
						<view class="list">{{ `${view.order.startTime}` }}</view>
						<view class="list">{{ setDuration(view.order.duration) }}</view>
						<view class="list">{{ `${view.order.endTime}` }}</view>
					</view>
				</view>
			</view>
			<view
				class="ticket_box"
				@click="jump('pay')">
				<u-cell-group>
					<u-cell
						title="繳費金額"
						:isLink="false"
						:value="`$ ${view.order.money}`"></u-cell>
					<u-cell
						title="已繳金額"
						:isLink="false"
						:value="`$ ${view.order.money}`"></u-cell>
					<u-cell
						title="找零金額"
						:isLink="false"
						:value="`$ ${0}`"></u-cell>
				</u-cell-group>
			</view>
		</view>
		<error-tip v-if="isErrorTipShow"> </error-tip>
		<!-- 确认支付订单成功后 -->
		<custom-pay
			v-if="isPayShow"
			:money="money"
			:payType="payType"
			:payOpt="payOpt"
			@handCountMoney="handCountMoney"
			@handCanel="handCanel">
		</custom-pay>
		<!-- 确认支付订单失败后 -->
		<custom-error-pay
			v-if="isPayErrorShow"
			:money="money"
			:payType="payType"
			:payOpt="payOpt">
		</custom-error-pay>
		<!-- 支付过程 -->
		<custom-pending-pay v-if="isPayPendingShow"> </custom-pending-pay>
	</view>
</template>

<script>
import useStore from '@/store/index.js';
import baseURL from '@/utils/baseURL.js';
import { getRoomList, getCouponList } from '@/api/user';
import { getOrderCode } from '@/api/order';
import { formatDate } from '@/utils/formatDate.js';
import customCoupon from './components/customCoupon.vue';
import ErrorTip from './components/errorTip.vue';
import CustomPay from './components/customPay.vue';
import CustomPendingPay from './components/customPendingPay.vue';
import CustomErrorPay from './components/customErrorPay.vue';
export default {
	components: {
		customCoupon,
		ErrorTip,
		CustomPay,
		CustomPendingPay,
		CustomErrorPay,
	},
	data() {
		return {
			src: [],
			roomImg: '',
			baseURL,
			isChecked: false,
			disabled: false,
			isCouponShow: false,
			isPayShow: false, // 确认支付订单
			isPayErrorShow: false, // 支付错误或失败
			isPayPendingShow: false, // 确认支付订单
			isErrorTipShow: false, // 支付异常
			money: '0', // 支付的金额
			payOpt: {}, // 支付的对象
			payType: '0', // 支付方式
			changeText: '獲取驗證碼',
			view: {
				ticket: {},
				user: {},
				store: '',
				coupon: '',
				count: 0,
				couponMoney: 0,
				room: {}, // 包厢信息
				order: {}, // 订单信息
				packOrder: {}, // 订单套餐信息
			},
			form: {},
			statusBarHeight: 0, // 顶部状态栏高度
			bthHeight: 0, // 底部按钮高度
			list: [],
			options: {
				coupon: [],
			},
			scrollTop: 0,
			old: {
				scrollTop: 0,
			},
			page: 1,
			timer: null,
		};
	},
	onLoad(options) {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		// const screenTop = uni.getSystemInfoSync().safeArea.top;
		// const screenBot = uni.getSystemInfoSync().safeArea.bottom;
		this.bthHeight = uni.getSystemInfoSync().screenHeight - (1000 - 40) / 2;
		// console.log('uni.getSystemInfoSync()', uni.getSystemInfoSync());
		// console.log('this.bthHeight', this.bthHeight);
		// console.log('screenTop', screenTop);
		// console.log('screenBot', screenBot);
		const userOptions = JSON.parse(uni.getStorageSync('userOptions'));
		const equipmentOptions = JSON.parse(uni.getStorageSync('equipmentOptions'));
		const { user, room, order } = useStore();
		this.form = { ...user.ticket, coupon: '' };
		this.view = {
			ticket: user.ticket,
			user: userOptions,
			store: equipmentOptions.name,
			coupon: '',
			room: room.getRoomOptions,
			order: order.getOrderObj,
			packOrder: order.getOrderObj.package_options,
		};
		console.log('view', this.view);
		// this.getRoomList(user.ticket);
		// this.getCouponList();
		this.setSwiperImg();
		console.log(user);
		// const token = JSON.parse(uni.getStorageSync('token'))
		// 	? JSON.parse(uni.getStorageSync('token'))
		// 	: ''; // 1 店家 2商家
		// if (!token) {
		// 	uni.navigateTo({
		// 		url: '/pages/login/login',
		// 	});
		// } else {
		// }
		console.log('options', options);
		this.countdown();
		this.getOrderCode();
	},
	onUnload() {
		clearTimeout(this.timer);
	},
	methods: {
		handCountMoney() {
			this.isPayPendingShow = true;
			this.isPayShow = false;
		},
		handCanel() {
			this.isPayShow = false;
			uni.navigateTo({
				url: '/pages/index/index',
			});
		},
		setSwiperImg() {
			const equipmentOptions =
				JSON.parse(uni.getStorageSync('equipmentOptions')) &&
				Object.keys(JSON.parse(uni.getStorageSync('equipmentOptions'))).length >
					0
					? JSON.parse(uni.getStorageSync('equipmentOptions'))
					: {};
			// console.log('equipmentOptions', equipmentOptions.imagejh);
			const _src = equipmentOptions.imagejh
				? equipmentOptions.imagejh.split(',')
				: [];
			if (_src.length > 1) {
				this.src = _src.map(item => baseURL + item);
			} else if (_src.length === 1) {
				this.src = [baseURL + _src[0]];
			}
		},
		countdown() {
			this.timer = setTimeout(() => {
				// uni.navigateTo({
				// 	url: '/pages/index/index',
				// });
			}, 1000 * 60 * 10);
		},
		clearCountdown() {
			clearTimeout(this.timer);
			this.countdown();
		},
		slected(data) {
			this.view.coupon = data.title;
			this.view.couponMoney = data.money * 1;
			this.view.ticket.money = this.view.ticket.money - data.money;
			this.form.money = this.view.ticket.money - data.money;
		},
		submit() {
			this.isPayShow = true;
		},
		checkForm() {
			const { user_name, user_pass } = this.form;
			return user_name && user_pass ? true : false;
		},
		// getCouponList() {
		// 	const equipmentOptions = JSON.parse(
		// 		uni.getStorageSync('equipmentOptions')
		// 	);
		// 	getCouponList({
		// 		type: 1,
		// 		page: this.page,
		// 		store_id: equipmentOptions.store_id,
		// 	}).then(res => {
		// 		this.options.coupon = res;
		// 		console.log('view', res);
		// 	});
		// },
		// getRoomList(data) {
		// 	const id = data.room_type;
		// 	if (id !== 0) {
		// 		getRoomList({}).then(res => {
		// 			const arr = res.find(item => item.id === id);
		// 			console.log('arr', arr);
		// 			this.view.ticket.room_type_name = arr[0].name;
		// 		});
		// 	} else {
		// 		this.view.ticket.room_type_name = '全场通用';
		// 	}
		// },
		close() {
			this.isCouponShow = false;
		},
		jump(data) {
			let url = '';
			switch (data) {
				case 'register':
					url = '/pages/register/register';
					break;
				case 'codeLogin':
					url = '/pages/menu/menu';
					break;
				case 'scanCode':
					url = '/pages/scanCode/scanCode';
					break;
				case 'pay':
					url = '/pages/pay/ticket';
					break;
				case 'logout':
					url = '/pages/index/index';
					break;
				default:
			}
			uni.navigateTo({ url });
		},
		logout() {
			uni.removeStorageSync('userOptions');
			this.jump('logout');
		},
		handShopping() {
			console.log('购买');
		},
		setDuration(str) {
			const _arr = str.split(',');
			console.log('_arr', _arr);
			if (_arr[0] === '0') {
				return `${_arr[1]}分钟`;
			} else if (_arr[1] === '00') {
				return `${_arr[0]}小时`;
			} else {
				return `${_arr[0]}小时${_arr[1]}分钟`;
			}
		},
		// 获取订单编号
		getOrderCode() {
			const { user, room, order } = useStore();
			const params = Object.assign(
				{
					room_id: room.getRoomOptions.id,
					pay_type: order.getOrderPay.pay_type,
					money: order.getOrderObj.money
						? order.getOrderObj.money.split('.')[0] * 1
						: '',
					date: `${order.getOrderObj.year}-${order.getOrderObj.date}`,
					timeslot: `${order.getOrderObj.startTime},${order.getOrderObj.endTime}`,
				},
				order.getOrderObj.package_options &&
					order.getOrderObj.package_options.id
					? { package_id: order.getOrderObj.package_options.id }
					: {}
			);
			getOrderCode(params)
				.then(res => {
					const { room, order } = useStore();
					console.log('res====', res);
					if (res.order_no) {
						this.payOpt = res;
						this.isPayShow = true;
					}
				})
				.catch(err => {
					this.isPayErrorShow = true;
				});
			this.payType = order.getOrderPay.pay_type
				? order.getOrderPay.pay_type
				: '';
			this.money = order.getOrderObj.money ? order.getOrderObj.money : '';
			console.log('payType', this.money);
		},
		// 设置 结束日期和时间
		setDate(str) {
			// 如果后面的时间小于前面的日期需要转化成时间戳加一天,再通过 Date的方法获取年月日
			// 如果后面的时间大于前面的日期正常使用Date.now()
			console.log(
				'str',
				formatDate(
					(new Date(str).getTime() + 1000 * 60 * 60 * 24) / 1000,
					'yyyy-mm-dd'
				)
			);
			return `${formatDate(
				(new Date(str).getTime() + 1000 * 60 * 60 * 24) / 1000,
				'yyyy-mm-dd'
			)} 周${formatDate(
				(new Date(str).getTime() + 1000 * 60 * 60 * 24) / 1000,
				'w'
			)}`;
		},
	},
};
</script>

<style lang="scss" scoped>
.predetermine {
	height: 100%;
	// .img_box {
	// 	// padding: 40rpx 40rpx 0;
	// }
	.main {
		padding: 20rpx;
		.title {
			padding-bottom: 20rpx;
			font-size: 24rpx;
			color: $uni-color-green;
			display: flex;
			justify-content: space-between;
		}
		.room_info {
			padding: 20rpx 0;
			background-color: $uni-color-white;
			&_box {
				display: flex;
				justify-content: space-between;
				.room_info_l {
					width: 210rpx;
					height: 174rpx;
					padding-left: 20rpx;
				}
				.room_info_r {
					width: 446rpx;
					// height: 174rpx;
					&_content {
						display: flex;
						justify-content: flex-start;
						flex-wrap: wrap;
						.label {
							padding: 3rpx;
							margin-right: 5rpx;
							margin-bottom: 5rpx;
							font-size: 24rpx;
							color: $uni-color-green;
							border: 2rpx solid $uni-color-green;
						}
					}
					.room_info_r_pk {
						// height: 200rpx;
						.room_time {
							font-size: 24rpx;
							background-color: '#c8f0dc';
							&_box {
								// height: 100rpx;
								.room_time_top {
									display: flex;
									justify-content: space-between;
									.list {
										flex-grow: 1;
										flex-basis: 0;
										padding: 0 20rpx;
										text-align: center;
									}
								}
							}
						}
					}
				}
			}
		}
		.room_time {
			font-size: 24rpx;
			background-color: $uni-color-white;
			&_box {
				height: 100rpx;
				.room_time_top {
					display: flex;
					justify-content: space-around;
					.list {
						flex-grow: 1;
						flex-basis: 0;
						text-align: center;
					}
				}
				.room_time_bot {
					display: flex;
					justify-content: space-around;
					.list {
						flex-grow: 1;
						flex-basis: 0;
						text-align: center;
					}
				}
			}
		}
		.ticket_box {
			position: relative;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			background-color: $uni-color-white;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				width: 250rpx;
				height: 150rpx;
				text-align: center;
				border-top-left-radius: 20rpx;
				border-bottom-left-radius: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: $uni-color-white;
				mask-image: radial-gradient(
						circle at 500rpx 8rpx,
						transparent 8rpx,
						$uni-color-green 9rpx
					),
					radial-gradient(
						closest-side circle at 50%,
						$uni-color-green 99%,
						transparent 100%
					);
				mask-size: 100%, 10rpx 20rpx;
				mask-repeat: repeat, repeat-y;
				mask-position: 140rpx 10rpx, 245rpx;
				mask-composite: source-out;
				mask-composite: subtract;
				background-color: $uni-color-green;
			}
			.right {
				flex: 1;
				height: 150rpx;
				padding-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.expir {
					font-size: 24rpx;
					color: $uni-color-grey-dark;
				}
			}
			.btn {
				position: absolute;
				right: 0;
				bottom: 50rpx;
				height: 40rpx;
				padding: 0 10rpx;
				border: 2rpx solid $uni-color-green;
				line-height: 40rpx;
				text-align: center;
				border-radius: 20rpx;
				font-size: 24rpx;
				color: $uni-color-green;
			}
		}
	}
	.footer {
		.bot_nav_btn_box {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			background-color: $uni-color-white;

			.container {
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;

				.describe {
					padding-left: $uni-spacing-row-base;
					text-align: left;
					color: $uni-color-red-light;
				}

				.btn {
					width: 300rpx;
					text-align: center;
					background-color: $uni-color-green;
					color: $uni-color-white;
				}
			}
		}
	}
	.feature {
		position: relative;
	}
}
</style>
